<template>
  <div class="toast">
    <i :class="getClass"></i>
    <span>{{ useToast.toastMsg }}</span>
  </div>
</template>

<script setup lang="ts">
import { computed } from "vue";
import { useToastStore } from "@/store/showToast";
const useToast = useToastStore();

const getClass = computed(() => {
  switch (useToast.toastType) {
    case "success":
      return "iconfont icon-toast_chenggong";
      break;
    case "error":
      return "iconfont icon-toast-shibai_huaban";
      break;
    case "warning":
      return "iconfont icon-toast-jinggao";
      break;
    default:
      return;
  }
});
</script>

<style lang="less" scoped>
.toast {
  position: fixed;
  padding: 10px 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff;
  left: 40vw;
  top: 0;

  border-radius: 6px;

  .iconfont {
    margin-right: 10px;
  }

  .icon-toast-shibai_huaban {
    color: red;
  }

  .icon-toast_chenggong {
    color: green;
  }

  .icon-toast-jinggao {
    color: orange;
  }
}
</style>
